<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>login</title>
    <style type="text/css">


        #div1 {
            height: 30px;
            width: 600px;
            margin: 0 auto;
        }

        #div1 > h1 {
            margin: auto;
            font-size: 60px;
        }

        .tbody_div {
            height: 1000px;
            background-image: url("https://up.enterdesk.com/edpic_source/31/c3/d2/31c3d265a97339b7b50e402202227af2.jpg");
            background-size: cover;

        }

        .tbody_div > div {
            height: 500px;
            width: 500px;
            float: right;
            margin-top: 100px;
            margin-right: 100px;
            background-color: rgba(226, 244, 255, 0.4);
        }

        #div2 div {
            height: 100px;
            width: 300px;
            margin-left: 100px;
        }

        #d0 {
            margin-top: 50px;
            font-size: 20px;
        }

        #d1 {
            margin-top: 50px;
            font-size: 20px;
        }

        #d2 {
            margin-top: 50px;
            font-size: 20px;
        }

        #d3 {
            margin-top: 30px;
            font-size: 20px;
        }

        #d0 #nickName {
            height: 30px;
            width: 220px;
            float: right;
            background-color: rgba(255, 255, 255, 0.8);
        }

        #d1 #userName {
            height: 30px;
            width: 220px;
            float: right;
            background-color: rgba(255, 255, 255, 0.8);
        }

        #d2 #password {
            height: 30px;
            width: 220px;
            float: right;
            background-color: rgba(255, 255, 255, 0.8);
        }


        #d3 #loginOn {
            height: 30px;
            width: 100px;
            margin-left: 125px;
        }

        .tfoot_div {
            height: 50px;
            background-color: #9ed2ff;
        }

        #d4 {
            height: 20px;
            width: 300px;
            margin: auto;
        }
    </style>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<thead>
</thead>
<tbody>
<div class="tbody_div">
    <div id="div2">
<!--        <p align="center" style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>-->
        <form id="registerForm" th:action="@{/register}">
            <div id="d0">
                <span>昵&nbsp;&nbsp;&nbsp;&nbsp;称：<input type="text" placeholder="请输入昵称" name="userName" id="nickName"/></span>
            </div>
            <div id="d1">
                <span>用户名：<input type="text" placeholder="请输入用户名" name="userName" id="userName"/></span>
            </div>
            <div id="d2">
                密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="text" name="password" id="password" placeholder="请输入密码"/>
            </div>
            <div id="d3">
                <input type="submit" id="loginOn" value="注册"/>
            </div>
        </form>

    </div>
</div>
</tbody>
<tfoot>
<div class="tfoot_div">
    <div id="d4" style="text-align: center">
        2021-WorkHard <br>联系邮箱：2206981924@qq.com
    </div>
</div>
</tfoot>
<script type="text/javascript">
    // function samePassword() {
    //     let val = $(`#password`).val();
    //     let val1 = $('#password1').val();
    //     let val2 = $('#userName').val();
    //     if (val2 == null) {
    //         alert("请填写用户名");
    //         return false;
    //     }
    //     if (val == val1) {
    //         return true;
    //     } else {
    //         alert("密码不一致")
    //         return false
    //     }
    // }
</script>
</body>
</html>